<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>
    <p>账号:<input type="text" name="name"/></p>
    <p>密码:<input type="text" name="password"/></p>
    <p>性别:<input type="text" name="sex"/></p>
    <p>状态:<input type="text" name="status"/></p>
    <button type="button" onclick="add()">新增        </button>
</form>
<div id="content">
</div>
<a href="#" onclick="page(1)">首页</a>
<a href="#" onclick="page(num-1)">上一页</a>
<a href="#" onclick="page(num+1)">下一页</a>
<a href="#" onclick="page(total)">尾页</a>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<script>
    var num=1;  //当前页数
    var total=0;     //总页数
    //为什么没有通过表单提交: 发送的是异步请求 提交表单时同步请求
    function add(){
        //自己组装数据
        var name=document.getElementsByName("name")[0].value;
        var password=document.getElementsByName("password")[0].value;
        var sex=document.getElementsByName("sex")[0].value;
        var status=document.getElementsByName("status")[0].value;
        //前后端分离的项目 数据交互都是json格式
        //前端提交给后端数据时json(基于key(必须时后端对象属性名)-value)
        var user={
            name:name,
            password:password,
            sex:sex,
            status:status
        };
        //虽然现在组装数据很麻烦  后期使用vue的时候
        //自动吧提交的数据自动组装json

        axios.post('http://localhost:8080/add',user).then(res=>{
            console.log(res.data);  //后端的json的结果
            var r=res.data;
            if(r.code==1){
                alert(r.msg);
                //跳转
            }else{
                alert(r.msg);
                //跳转
            }
        })
    }
    function page(pageNum){
        axios.post('http://localhost:8080/page?pageNum='+pageNum).then(res=>{
            var r=res.data;
            console.log(r.data);
            num=r.data.pageNum;//给外面全局变量赋值
            total=r.data.totalPage;
            var div=document.getElementById("content");
            var content="";
            for(var i=0;i<r.data.list.length;i++){
                content+= r.data.list[i].id+" "+r.data.list[i].name+" "+r.data.list[i].password+"<br>";
            }
            div.innerHTML=content;
        })
    }
</script>




